<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/pro/css/buy/cart2.e3e13dad.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        body {
            padding: 10px;
        }

        .checkbox {
            display: inline-block;

        }

        .checkbox .iconfont {
            display: block;
            font-style: normal;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            border: 1px solid #e0e0e0;
            user-select: none;
            color: #fff;
        }

        .checkbox .iconfont:hover {
            color: #757575;
        }

        .checkbox input:checked+.iconfont {
            background-color: #ff6700;
            border-color: #ff6700;
            color: #fff;
        }

        /* 商品展示 */
        #showGoods {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        #showGoods li {
            width: 18%;
            box-sizing: border-box;
            padding: 10px;
            font-size: 13px;
            line-height: 20px;
        }

        #showGoods li:hover {
            box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        #showGoods li img {
            width: 70%;
            display: block;
            margin: 20px auto;
        }

        #showGoods li .price {
            color: red;
        }

        #showGoods li .name {
            /* 多行文本溢出隐藏 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #searchBox {
            width: 1226px;
            height: 32px;
            margin: 50px auto;
            display: flex;
            font-size: 13px;
        }

        #searchBox .searchBar {
            width: 300px;
            height: 32px;
            border: 1px solid #333;
            display: flex;
        }

        #searchBox .searchBar .searchCon {
            outline: none;
            border: 0;
            width: 268px;
            height: 32px;
        }

        #searchBox .searchBar .searchBtn {
            flex: 1;
            background-color: grey;
        }

        .orderColBox,
        .orderTypeBox {
            margin-left: 20px;
            line-height: 32px;
            padding: 0 10px;
            border: 1px dashed #333;
        }

        .orderColBox .active {
            color: pink;
        }

        .orderTypeBox .active {
            color: pink;
        }

        .showPageBox {
            margin-left: 20px;
            line-height: 32px;
        }

        .showPageBox select {
            height: 32px;
            outline: none;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>{{count}}</div>
        <goods-list-render></goods-list-render>
        <!-- slotGoodsInfo = {goods,a,b} -->
        <goods-list-render>
            <template v-slot:default="slotGoodsInfo">
                <li :key="slotGoodsInfo.goods._id">
                    <p class="name">商品名称:{{slotGoodsInfo.goods.title}}</p>
                    <p>商品价格:{{slotGoodsInfo.goods.price}}</p>
                    <p>商品评论:{{slotGoodsInfo.goods.comment}}</p>
                    <p>店铺名称:{{slotGoodsInfo.goods.currShop}}</p>
                </li>
            </template>
        </goods-list-render>
    </div>
</body>
<template id="GoodsRender">
    <ul id="showGoods">
        <!-- 期望li中的html结构可以由用于自由指定 => 插槽(slot  问题:good在组件内 -> 将goods传递出去) -->
        <!-- 传递的数据 会整合成对象 {goods,a,b} -->
        <slot v-for="goods in list" name="default" :goods="goods" :a="1" b="2">
            <li :key="goods._id">
                <a href="">
                    <img :src="goods.img" alt="">
                    <div class="price">{{goods.price.toFixed(2)}}</div>
                    <div class="name" v-text="goods.title"></div>
                </a>
            </li>
        </slot>
    </ul>
</template>
<script>


    // 插槽作用域
    // 目的: 插槽作用域的目的:让父组件的插槽内容,对应插槽名称访问子组件中的数据 

    // 1. 子组件定义插槽时,可以给插槽<slot></slot> 绑定name属性和插槽prop(需要向父组件传递的数据)
    // <slot name="header" :title="article.title" :a="1" :b="2">{{article.title}}</slot>

    // 2. 父组件使用子组件时，需要在template中对应插槽名称接收数据, 再配置插槽内容
    //  <template v-slot:header="slotHeaderData">    对应插槽名称接收数据
    //         {{ slotHeaderData.title }}---{{ slotHeaderData.a }}---{{ slotHeaderData.b }}  配置插槽的内容
    //  </template>

    Vue.component("goods-list-render", {
        template: "#GoodsRender",
        data() {
            return {
                wd: "",
                col: "_id",
                type: "asc",
                page: 1,
                size: 10,
                maxPage: null,
                list: [],
            }
        },
        methods: {
            getData() {
                // "http://localhost:3000/goods/get?wd=&col=_id&type=asc&page=1&size=10"
                // wd 搜索的关键词 ""查询所有数据
                // col 排序的字段名 (_id title price)
                // type 排序的方式  asc(升序)  desc(降序)
                // page 第几页
                // size 每页显示多少条 
                axios.get("http://localhost:3000/goods/get", {
                    params: this.search
                }).then(res => res.data).then(result => {
                    console.log(result);
                    var { status, message, list, maxPage } = result;
                    if (result.status == 200) {
                        this.list = list;
                        this.maxPage = maxPage;
                    }
                })
            }
        },
        computed: {
            search() {
                return {
                    wd: this.wd,
                    col: this.col,
                    type: this.type,
                    page: this.page,
                    size: this.size,
                }
            }
        },
        mounted() {
            this.getData();
        },
    })


    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            bool: true,
        },

    })

</script>

</html>